<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta barberName="viewport" content="width=device-width, initial-scale=1.0">
	<title>理发店项目管理系统后台</title>
	<link rel="stylesheet" href="../css/amazeui.css" />
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="../css/core.css" />
	<link rel="stylesheet" href="../css/menu.css" />
	<link rel="stylesheet" href="../css/index.css" />
	<link rel="stylesheet" href="../css/admin.css" />
	<link rel="stylesheet" href="../css/page/typography.css" />
	<link rel="stylesheet" href="../css/page/form.css" />

	<link href="../css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="../js/jquery-2.1.0.js" ></script>
	<script type="text/javascript" src="../js/amazeui.min.js"></script>
	<!--<script type="text/javascript" src="../js/app.js" ></script>-->
	<script type="text/javascript" src="../js/blockUI.js" ></script>
	<!--<script type="text/javascript" src="js/chart_line.js"></script>-->
</head>
<!-- Begin page -->
<body class="">
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
	以获得更好的体验！</p>
<![endif]-->
<!-- Begin page -->
<header class="am-topbar am-topbar-fixed-top">
	<div class="am-topbar-left am-hide-sm-only">
		<a href="index.action" class="logo"><span>Admin<span>to</span></span><i class="zmdi zmdi-layers"></i></a>
	</div>

	<div class="contain">

		<!-- content start -->
		<div class="admin-content">

			<div class="am-cf am-padding">
				<div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">理发师管理</strong> /
					<small>Barber Management</small>
				</div>
			</div>
			<hr>

			<div class="am-tabs am-margin" data-am-tabs="">

				<ul class="am-tabs-nav am-nav am-nav-tabs">
					<li class="am-active"><a href="#tab1"><span class="am-icon-male"></span> 基本信息</a></li>
					<button type="button" class="am-btn am-btn-primary edit"><span class="am-icon-plus-square"></span> 新增项目
					</button>
				</ul>

				<div class="am-tabs-bd" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
					<div class="am-tab-panel am-fade am-in am-active" id="tab1">

						<!--<ul class="am-slides">
							<li class="am-u-md-2  am-u-sm-10 am-thumbnail hover-div" style="margin:10px 4%;float:left">
								<img src="../images/hehe.jpg" style="width: 298px;height: 170px">
								<div style="margin-top:10px;float:right;margin-right:10px;margin-bottom:10px;">
									<span style="font-style: italic">学校官网练习</span>
								</div>
								<div  style="display:none;margin-bottom:0px;" class="am-btn-group am-btn-group-xs am-btn-toolbar am-table am-table-striped am-table-hover table-main button-groups" >
									<button  style="margin-left:10px " type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary edit">
										<span class="am-icon-pencil-square-o"></span>编辑
									</button>
									<button  style="float:right" type="button" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only delete">
										<span class="am-icon-trash-o"></span> 删除
									</button>
								</div>
							</li>
						</ul>-->

					</div>
				</div>
			</div>
			<!-- content end -->
		</div>
	</div>
</header>
<!-- end page -->

<!--修改资料弹窗-->
<div class="am-modal am-modal-prompt am-modal-out" tabindex="-1" id="my-prompt" style="display: none; margin-top: -269px;">
	<div class="am-modal-dialog">
		<form class="am-form" id="teamIntroduction" enctype="multipart/form-data">
			<div class="am-modal-hd"></div>
			<!--<div>
				<input type="file" name="pic" style="display: none" id="pic" class="pic" required="required">
				<img class="newPic" alt="" width="100" height="100" onclick="loadPic()" src="../images/add.png">
			</div>-->
			<div class="am-modal-bd">
				<input name="barberId" id="barberId" hidden="">
				<strong>理发师名称</strong>
				<input type="text" class="am-modal-prompt-input barberName" name="barberName" id="barberName">
				<strong>理发师级别</strong>
				<input type="text" class="am-modal-prompt-input barberLevel" name="barberLevel" id="barberLevel">
				<strong>服务价格</strong>
				<input type="text" class="am-modal-prompt-input serviceCharge" name="serviceCharge" id="serviceCharge">
				<strong>理发师图片</strong>
				<input type="text" class="am-modal-prompt-input barberImg" name="barberImg" id="barberImg">
			</div>
			<div class="am-modal-footer">
				<span class="am-modal-btn" data-am-modal-cancel="">取消</span>
				<span class="am-modal-btn" data-am-modal-confirm="" id="upload">提交</span>
			</div>
		</form>
	</div>
</div>

<!--删除弹窗-->
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
	<div class="am-modal-dialog">
		<div class="am-modal-hd">删除确认</div>
		<div class="am-modal-bd">
			你确定要删除吗？
		</div>
		<div class="am-modal-footer">
			<span class="am-modal-btn" data-am-modal-cancel>取消</span>
			<span class="am-modal-btn" data-am-modal-confirm>确定</span>
		</div>
	</div>
</div>

<!--删除成功提示弹窗-->
<div class="am-g">
	<div class="am-modal am-modal-alert" tabindex="-1" id="del-alert">
		<div class="am-modal-dialog">
			<div class="am-modal-hd">删除成功！</div>
			<div class="am-modal-bd">
			</div>
			<div class="am-modal-footer">
				<span class="am-modal-btn">确定</span>
			</div>
		</div>
	</div>
</div>

<div class="admin">
	<!--<div class="am-g">-->
	<!-- ========== Left Sidebar Start ========== -->
	<!--<div class="left side-menu am-hide-sm-only am-u-md-1 am-padding-0">
        <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 548px;">
            <div class="sidebar-inner slimscrollleft" style="overflow: hidden; width: auto; height: 548px;">-->
	<!-- sidebar start -->
	<div class="admin-sidebar am-offcanvas  am-padding-0" id="admin-offcanvas">
		<div class="am-offcanvas-bar admin-offcanvas-bar">
			<!-- User -->
			<div class="user-box am-hide-sm-only">
				<div class="user-img">
					<img src="../images/hehe.jpg" alt="user-img" title="Mat Helme" class="img-circle img-thumbnail img-responsive">
					<div class="user-status offline"><i class="am-icon-dot-circle-o" aria-hidden="true"></i></div>
				</div>
				<h5><a href="#">管理员：宇健</a> </h5>
				<ul class="list-inline">
					<li>
						<a href="#">
							<i class="fa fa-cog" aria-hidden="true"></i>
						</a>
					</li>

					<li>
						<a href="#" class="text-custom">
							<i class="fa fa-cog" aria-hidden="true"></i>
						</a>
					</li>
				</ul>
			</div>

			<!--<div class="am-cf admin-main">-->

			<!-- End User -->

			<ul class="am-list admin-sidebar-list">
				<li><a href="index.action"><span class="am-icon-home"></span> 首页</a></li>
				<li class="admin-parent">
					<a class="am-cf" data-am-collapse="{target: '#collapse-nav1'}"><span class="am-icon-table"></span> 店铺管理 <span class="am-icon-angle-right am-fr am-margin-right"></span></a>
					<ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav1">
						<!--<li><a href="table_basic.action" class="am-cf"> 基本表格</span></a></li>-->
						<li><a href="listCustomer.action">用户管理</a></li>
						<li><a href="listBarber.action">员工管理</a></li>
					</ul>
				</li>
				<li class="admin-parent">
					<a class="am-cf" data-am-collapse="{target: '#collapse-nav2'}"><i class="am-icon-line-chart" aria-hidden="true"></i> 菜单管理 <span class="am-icon-angle-right am-fr am-margin-right"></span></a>
					<ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav2">
						<li><a href="listProduct.action" class="am-cf"> 理发产品</span></a></li>
						<li><a href="listService.action" class="am-cf"> 理发类型</span></a></li>
					</ul>
				</li>
				<li class="admin-parent">
					<a class="am-cf" data-am-collapse="{target: '#collapse-nav5'}"><span class="am-icon-file"></span> 预约管理 <span class="am-icon-angle-right am-fr am-margin-right"></span></a>
					<ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav5">
						<li><a href="listCustomer.action" class="am-cf"> 网站样式</a></li>
						<li><a href="listCustomer.action"> 轮播设置</a></li>
					</ul>
				</li>
			</ul>
			<!--</div>-->
		</div>
	</div>

	<div class="am-dimmer" data-am-dimmer="" style="display: none;"></div>
</div>
</body>
<!-- sidebar end -->

<!--</div>
    </div>
    </div>-->
<!-- ========== Left Sidebar end ========== -->

<!--&lt;!&ndash;[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>-->
<![endif]
&lt;!&ndash;[if (gte IE 9)|!(IE)]>&lt;!&ndash;dash;&gt;
<!--<script src="assets/js/jquery.min.js"></script>
&lt;!&ndash;<![endif]&ndash;&gt;
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/jquery.form.min.js"></script>-->
<script src="../js/jquery.form.min.js"></script>
<script>


	$(function(){
		console.log("加油");
		getContent();

		function getData(result){
			if(result.code==200){
				return result.data;
			}else{
				alert(result.msg||"获取信息错误");
				return null;
			}
		}

		function getContent(result) {
			/* admin.json */
			$.get("../admin/member/listBarber.action",function(result,error){
				var items = getData(result);
				appendContent(items);
			});
		}

		function appendContent(items) {
			console.log("appendContent");
			var contentMain;
			var listContentMain=[];
			items.forEach(function (itemMain) {
				listContentMain.push('<ul class="am-slides">');
				listContentMain.push('	<li class="am-u-md-2  am-u-sm-10 am-thumbnail hover-div" style="margin:10px 4%;float:left">');
				listContentMain.push('			<a target="_blank" href="'+ itemMain.barberImg +'"><img src="'+ itemMain.barberImg +'" style="width: 298px;height: 170px"></a>');
				listContentMain.push('			<div style="margin-top:10px;float:right;margin-right:10px;margin-bottom:10px;">');
				listContentMain.push('				<a style="font-weight: bolder" target="_blank"><span style="font-style: italic">'+ itemMain.barberName +'</span> <span style="font-style: italic">'+ itemMain.barberLevel +'</span> <span style="font-style: italic;color:red">'+ itemMain.serviceCharge +'</span>元/每人</a>');
				listContentMain.push('			</div>');
				listContentMain.push('			<div  style="display:none;margin-bottom:0px;" class="am-btn-group am-btn-group-xs am-btn-toolbar am-table am-table-striped am-table-hover table-main button-groups" data-id="'+ itemMain.barberId +'">');
				listContentMain.push('				<button  style="margin-left:10px " type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary edit">');
				listContentMain.push('					<span class="am-icon-pencil-square-o"></span>编辑');
				listContentMain.push('				</button>');
				listContentMain.push('				<button  style="float:right" type="button" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only delete">');
				listContentMain.push('					<span class="am-icon-trash-o"></span> 删除');
				listContentMain.push('				</button>');
				listContentMain.push('			</div>');
				listContentMain.push('	</li>');
				listContentMain.push('</ul>');
			});
			contentMain=listContentMain.join("");
			$("#tab1").append(contentMain);

			//按钮组监控
			$(".hover-div").hover(handlerIn, handlerOut);
			function handlerIn() {
				$(".button-groups").show();
			};
			function handlerOut() {
				$(".button-groups").hide();
			};
		}

	});

	//修改或新增成员弹窗并提交
	var id;
	$("body").on('click', '.edit', function () {
		id = this;
		if ( $(id).parent().attr("data-id")!=null || $(id).parent().attr("data-id")!=undefined ) {
			console.log("编辑进来了");
			$("#pic").next().attr("src",$(id).parent().prev().prev().children().attr("src"));
			$("#barberName").val($(id).parent().prev().children().children().prev().prev().text());
			$("#barberLevel").val($(id).parent().prev().children().children().prev().prev().next().text());
            $("#serviceCharge").val($(id).parent().prev().children().children().prev().prev().next().next().text());
			$("#barberImg").val($(id).parent().prev().prev().attr("href"));
			$("#barberId").val($(id).parent().attr("data-id"));
		} else {
			console.log("新增进来了");
			$("#barberName").val("");
			/*$("#pic").val("");
			$("#pic").next().removeAttr("src").attr("src", "../images/add.png");*/
			$("#barberLevel").val("");
			$("#barberImg").val("");
			$("#barberId").val("");
		}

		$('#my-prompt').modal({
			relatedTarget: this,
			closeOnConfirm: false,
			onConfirm: function (e) {
				//提交之前先做输入项判断
				if ($(id).parent().attr("data-id") == null) {

					if (($("#barberName").val() == "") || ($("#pic").val() == "") || ($("#barberLevel").val() == "") || ($("#barberImg").val() == "")) {
						alert("请补充完整信息 ！！");
						return;
					}
				} else {
					if (($("#barberName").val() == "") || ($("#barberLevel").val() == "") || ($("#barberImg").val() == "")) {
						alert("请补充完整信息 ！！");
						return;
					}
				}
				if ( $(id).parent().attr("data-id")!=null || $(id).parent().attr("data-id")!=undefined ) {
					//编辑操作
					var ReqData = "";
					var ReqUrl = "";
					if ($("#pic").val() == "") {
						ReqUrl = '../admin/member/updateBarber.action';
					} else {
						ReqUrl = '../admin/member/updateBarber.action';
					}
					console.info("===================")
					console.info(ReqData);
					//teamIntroduction为弹窗表单id
					//ajaxSubmit为jquery的表单提交函数
					$("#teamIntroduction").ajaxSubmit({
						type: 'post',
						url: ReqUrl,
						//url: 'team.json',
						data: "",
						success: function (data) {
							$('#my-prompt').modal('close');
							console.log(data);
							alert("修改成功!");
							setTimeout(function(){
								window.location.reload();//刷新
							},3000);
							//getMember();
						},
						error: function (XmlHttpRequest, textStatus, errorThrown) {
							console.log(XmlHttpRequest);
							console.log(textStatus);
							console.log(errorThrown);
							//alert("上传失败！")
						}
					});
				} else {
					//新增操作
					$("#teamIntroduction").ajaxSubmit({
						type: 'post',
						url: '../admin/member/addBarber.action',
						//url: 'team.json',
						data: "",
						success: function (data) {
							console.log(data);
							$('#my-prompt').modal('close');
							alert("新增成功!");
							setTimeout(function(){
								window.location.reload();//刷新
							},3000);
							//getContent();	//上传成功后重新获取页面内容
						},
						error: function (XmlHttpRequest, textStatus, errorThrown) {
							console.log(XmlHttpRequest);
							console.log(textStatus);
							console.log(errorThrown);
							alert("上传失败！");
						}
					});
				}
			},
			closeViaDimmer: false,
			onCancel: function (e) {

			}
		});
	});

	//单删
	var idDel;
	$("body").on('click', '.delete', function () {
		idDel = this;
		$('#my-confirm').modal({
			relatedTarget: this,
			closeOnConfirm: false,
			onConfirm: function (options) {
				console.log("给后台传的提示删除位置的barberId是：" + $(idDel).parent().attr("data-id"));
				ajax("../admin/member/removeBarber.action?barberId=" + $(idDel).parent().attr("data-id"), "", function () {
					$(idDel).parent().parent().parent().parent().remove();
				}, error, "text");
				window.location.reload();
			},
			onCancel: function () {
			}
		});
		function  error() {
			alert("服务器出错啦>__<");
		}
	});

	//修改资料上传图片弹窗
	function loadPic() {
		$("#pic").click();
		$("#pic").change(function () {
			if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test($("#pic").val()) && $("#pic").val() != "") {
				alert("图片类型必须是.gif,jpeg,jpg,png中的一种!");
				$("#pic").val("");
				return false;
			}
			if (this.files[0].size > 1 * 1024 * 1024) {
				alert("图片不能大于1M");
				$("#pic").val("");
				return false;
			} else {
				$(".newPic").attr("src", getObjectURL(this.files[0]));
				/* $("#oldPic").attr("src", getObjectURL(this.files[0]));*/
				/*getObjectURL(file);*/
			}
		});
	}

	//获取图片本地路径
	function getObjectURL(file) {
		var url = null;
		if (window.createObjectURL != undefined) { // basic
			url = window.createObjectURL(file);
		} else if (window.URL != undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(file);
		} else if (window.webkitURL != undefined) { // webkit or chrome
			url = window.webkitURL.createObjectURL(file);
		}
		console.log("图片的本地路径是："+url);
		return url;
	}

	//ajax封装
	function ajax(url, data, success, error, data_type) {
		data_type = (data_type == null) ? "json" : data_type;
		$.ajax({
			type: 'post',
			data: data,
			url: url,
			dataType: data_type,
			contentType: "application/json",
			success: function (d) {
				success(d);
			},
			error: function (e) {
				error(e);
			}
		});
	}
</script>
</html>